<template>
  <div class="header-container">
    <!--左边-->
    <div class="header-left flex-box">
      <el-icon class="icon" @click="store.commit('collapsMenu')">
        <Fold/>
      </el-icon>
      <ul class="flex-box">
        <li v-for="(item,index) in selectMenus"
            :key="item.path"
            class="tab flex-box"
            :class="{selected: route.path === item.path}"
        >
          <el-icon size="12" @click="store.commit('collapsMenu')">
            <component :is="item.icon"/>
          </el-icon>
          <router-link class="flex-box text" :to="{path: item.path}">
            {{ item.name }}
          </router-link>
          <el-icon size="12" class="close" @click="closeMenu(item,index)">
            <Close/>
          </el-icon>
        </li>
      </ul>
    </div>
    <!--右边-->
    <div class="header-right">
      <el-dropdown @command="handleCommand">
        <div class="el-dropdown-link flex-box">
          <el-avatar
              :src="userInfo.avatar"
          />
          <p class="user-name">{{userInfo.name}}</p>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>
<script setup>
import {Close, Fold} from "@element-plus/icons-vue"
import {useStore} from 'vuex'
import {computed} from 'vue'
//拿到当前路由 渲染tag的选中颜色效果
import {useRoute} from 'vue-router'
import router from "../router/index.js";
import {ElMessage} from "element-plus";

const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'))
const route = useRoute()
//拿到store的实例
const store = useStore()
//获取已选择的aside菜单
const selectMenus = computed(() => store.state.menu.selectMenu)
console.log(selectMenus, 'selectMenus')

//关闭菜单
const closeMenu = (item, index) => {
  console.log(item, 'closeMenu-item')
  console.log(index, 'closeMenu-index')
  store.commit('closeMenu', item)
  //删除的是非当前页
  if (item.path !== route.path) {
    return
  }
  //删除后剩下的tag元素
  const menuData = selectMenus.value;
  //删除当前页
  if (index === menuData.length) {
    //tag只有一个元素
    if (!menuData.length) {
      router.push({
        path: "/"
      })
    } else {
      router.push({
        path: menuData[index - 1].path
      })
    }
  } else {//删除的是中间的Tag
    router.push({
      path: menuData[index + 1].path
    })
  }
}

const handleCommand = (command) => {
  console.log(command, 'command')
  if (command === 'loginout') {//退出登录
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pz_v3pz')
    window.location.href = window.location.origin
  }
}
</script>
<style lang="less" scoped>
.flex-box {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 50px;
  padding-right: 25px;

  .header-left {
    height: 100%;

    .icon {
      width: 45px;
      height: 100%;
    }

    .icon:hover {
      background-color: #f0f2f5;
    }

    .tab {
      padding: 0 10px;
      width: 100%;

      .text {
        margin: 0 5px;
      }

      .close {
        visibility: hidden;
      }
    }

    .selected {
      background-color: #f5f5f5;

      a {
        color: #409eff;
      }

      i {
        color: #409eff;
      }
    }

    .tab:hover {
      background-color: #f5f5f5;

      .close {
        visibility: inherit;
        cursor: pointer;
        color: #000;
      }
    }
  }

  .header-right {
    .user-name {
      margin-left: 10px;
    }
  }

  a {
    height: 100%;
    color: #333;
    font-size: 15px;
  }
}
</style>
